<template>
  <div class="about-container">
    <div class="page-header">
      <h1 class="page-title">
        <el-icon class="title-icon"><InfoFilled /></el-icon>
        关于系统
      </h1>
    </div>

    <div class="content-wrapper">
      <el-card header="任务管理系统" class="about-card">
        <p class="description">
          这是一个基于Vue 3 + Element Plus + TypeScript构建的任务管理系统前端。
        </p>
        
        <el-list class="tech-list">
          <el-list-item>
            <template #actions>
              <el-tag type="success">前端框架</el-tag>
            </template>
            <el-list-item-meta>
              <template #avatar>
                <el-avatar style="background-color: #42b883">
                  <el-icon><Vue /></el-icon>
                </el-avatar>
              </template>
              <template #title>Vue 3</template>
              <template #description>渐进式JavaScript框架</template>
            </el-list-item-meta>
          </el-list-item>
          
          <el-list-item>
            <template #actions>
              <el-tag type="primary">UI组件库</el-tag>
            </template>
            <el-list-item-meta>
              <template #avatar>
                <el-avatar style="background-color: #409eff">
                  <el-icon><ElementPlus /></el-icon>
                </el-avatar>
              </template>
              <template #title>Element Plus</template>
              <template #description>基于Vue 3的组件库</template>
            </el-list-item-meta>
          </el-list-item>
          
          <el-list-item>
            <template #actions>
              <el-tag type="warning">类型安全</el-tag>
            </template>
            <el-list-item-meta>
              <template #avatar>
                <el-avatar style="background-color: #3178c6">
                  <el-icon><Code /></el-icon>
                </el-avatar>
              </template>
              <template #title>TypeScript</template>
              <template #description>JavaScript的超集</template>
            </el-list-item-meta>
          </el-list-item>
          
          <el-list-item>
            <template #actions>
              <el-tag type="info">路由管理</el-tag>
            </template>
            <el-list-item-meta>
              <template #avatar>
                <el-avatar style="background-color: #4fc08d">
                  <el-icon><Connection /></el-icon>
                </el-avatar>
              </template>
              <template #title>Vue Router</template>
              <template #description>Vue.js官方路由管理器</template>
            </el-list-item-meta>
          </el-list-item>
        </el-list>
        
        <el-divider />
        
        <h3 class="section-title">功能特性</h3>
        <el-list class="feature-list">
          <el-list-item>
            <template #actions>
              <el-icon style="color: #67c23a"><Check /></el-icon>
            </template>
            任务列表展示和分页
          </el-list-item>
          <el-list-item>
            <template #actions>
              <el-icon style="color: #67c23a"><Check /></el-icon>
            </template>
            任务搜索和过滤
          </el-list-item>
          <el-list-item>
            <template #actions>
              <el-icon style="color: #67c23a"><Check /></el-icon>
            </template>
            任务详情查看
          </el-list-item>
          <el-list-item>
            <template #actions>
              <el-icon style="color: #67c23a"><Check /></el-icon>
            </template>
            任务执行日志
          </el-list-item>
          <el-list-item>
            <template #actions>
              <el-icon style="color: #67c23a"><Check /></el-icon>
            </template>
            任务触发和停止
          </el-list-item>
          <el-list-item>
            <template #actions>
              <el-icon style="color: #67c23a"><Check /></el-icon>
            </template>
            响应式设计
          </el-list-item>
        </el-list>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
// Element Plus 图标已全局注册，无需导入
</script>

<style scoped>
.about-container {
  width: 80vw;
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
}

.page-header {
  margin-bottom: 24px;
}

.page-title {
  font-size: 24px;
  font-weight: 600;
  color: #303133;
  margin: 0;
  display: flex;
  align-items: center;
}

.title-icon {
  margin-right: 8px;
  color: #409eff;
}

.content-wrapper {
  background: white;
  border-radius: 8px;
}

.about-card {
  border-radius: 8px;
}

.description {
  font-size: 16px;
  color: #606266;
  margin-bottom: 24px;
  line-height: 1.6;
}

.tech-list {
  margin-bottom: 24px;
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 16px;
}

.feature-list {
  margin-top: 16px;
}

.el-list-item {
  padding: 12px 0;
}
</style>
